<template>
  <div class="perview">
    <el-container v-loading="loding">
      <el-header>
        当前学生： id：{{ student.sid }} _姓名：{{ student.name }} _成绩：{{
          student.achievement
        }}
        _班级：{{ student.grade }} _语言：{{ student.language }}

        <el-button type="primary" round @click="selectStudent">
          {{ selectflag ? "只显示参加的成员" : "显示全部" }}
        </el-button>
      </el-header>

      <el-container style="overflow-y: auto; height: 87vh">
        <el-aside
          width="200px"
          style="position: fixed; overflow-y: auto; height: 87vh"
          ><div>
            <el-tag
              class="tag"
              v-for="(o, index) in students"
              :key="o.sid"
              :type="
                student.sid === o.sid
                  ? ''
                  : o.language
                  ? 'warning'
                  : o.achievement == -1
                  ? 'info'
                  : 'success'
              "
              @click="changeNowStudent(o)"
              >{{ o.name }}</el-tag
            >
          </div></el-aside
        >

        <el-container style="overflow-y: auto">
          <div style="width: 200px"></div>
          <div style="width: 86%">
            <div v-for="(item, index) in topics" :key="index">
              <el-main style="text-align: left">
                <el-card shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="display: block; width: 200px"
                      >题目<span style="font-weight: 700; font-size: 18px"
                        >[{{ index + 1 }}]</span
                      ></span
                    >
                    <el-button
                      type="primary"
                      style="margin-left: 500px"
                      plain
                      @click="copy(item.answer)"
                      >复制代码</el-button
                    >
                    <el-input
                      v-model="item.grade"
                      placeholder="请输入分数"
                      style="width: 30%; margin-left: 100px"
                    >
                      <el-button
                        slot="append"
                        type="primary"
                        icon="el-icon-edit"
                        @click="comitClick(item.tid, item.grade)"
                      ></el-button
                    ></el-input>
                  </div>
                  <p
                    style="text-indent: 2em; white-space: pre-wrap"
                    v-html="item.topic"
                  ></p>

                  <pre-code
                    v-if="!loding"
                    :codes="item.answer != '' ? item.answer : '//暂无代码'"
                    :modeValue="item.modeValue"
                  ></pre-code>
                </el-card>
              </el-main>
              <hr />
            </div>
          </div>
        </el-container>
      </el-container>
      <el-footer>
        <el-button type="primary" @click="comitAllClick"
          >提交统计分数</el-button
        >
      </el-footer>
    </el-container>
    <!-- <el-button
      class="return_btn"
      type="primary"
      icon="el-icon-back"
      plain
      @click="$router.go(-1)"
      >返回</el-button
    > -->
  </div>
</template>
<script>
import PreCode from "../../components/PreCode.vue";
export default {
  components: {
    PreCode,
  },
  created() {
    this.getStudents();
    // console.log(this.topics);
  },
  data() {
    return {
      selectflag: true,
      input: "",
      topics: [],
      loding: true,
      student: {
        sid: "1",
        name: "张三",
        grade: "20软件",
        language: "java",
      },
      students: [],
    };
  },
  methods: {
    copy(value) {
      this.$copyText(value).then(
        (e) => {
          console.log("复制成功", e);
          this.$message.success("复制成功");
        },
        (e) => {
          this.$message.error("复制失败");
          console.log("复制失败", e);
        }
      );
    },
    changeNowStudent(student) {
      this.loding = true;
      this.student = student;
      const topics = JSON.parse(localStorage.getItem("question"));
      this.getPreview(topics);
    },
    getQuestion() {
      this.$http.get("/management/getQuestion").then((res) => {
        console.log(res);
        res.data.data.filter((item) => {
          const reg = /\/api\//g;
          item.topic = item.topic.replace(reg, this.$httpUrl);
        });
        localStorage.setItem("question", JSON.stringify(res.data.data));
        this.loding = false;
        // this.getPreview();
      });
    },
    getStudents() {
      this.getQuestion();
      this.$http.get("/management/personnel").then((res) => {
        console.log(res);
        this.students = res.data.data;
      });
    },
    getPreview(topics) {
      console.log(topics);
      this.$http.get(`/management/preview/${this.student.sid}`).then((res) => {
        console.log(res);
        const data = res.data.data;
        for (let i in topics) {
          for (let j in data) {
            if (topics[i].tid === data[j].tid) {
              const answer = JSON.parse(data[j].answer);
              this.$set(topics[i], "answer", answer.code);
              this.$set(topics[i], "modeValue", answer.type);
              break;
            }
          }
        }
        console.log(topics);
        this.topics = topics;
        setTimeout(() => {
          this.loding = false;
        }, 500);
      });
    },
    selectStudent() {
      this.selectflag = !this.selectflag;

      if (this.selectflag) {
        return this.getStudents();
      }
      const students = [];
      for (let i in this.students) {
        if (this.students[i].language != null) {
          students.push(this.students[i]);
        }
      }
      this.students = students;
    },
    comitClick(tid, grade) {
      console.log(tid, grade);
      this.$http
        .post("/management/inputAchievement", {
          sid: this.student.sid,
          tid,
          grade: Number(grade),
        })
        .then((res) => {
          console.log(res);
          if (res.data.message !== "ok") {
            return this.$message.error("提交失败");
          }
          this.$message.success("提交成功");
        });
    },
    comitAllClick() {
      this.$http
        .post(`management/submitAchievement?sid=${this.student.sid}`)
        .then((res) => {
          console.log(res);
          if (res.data.message !== "ok") {
            return this.$message.error("提交失败");
          }
          this.$message.success("提交成功");
          this.getStudents();
        });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  background-image: linear-gradient(to bottom right, #46fca7, #3fd5fb);
  height: 100vh;
}
.perview {
  width: 70%;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  min-width: 1000px;
  // height: 100vh;
}
.el-header,
.el-footer {
  font-size: 20px;
  background-color: #f4f7f9;
  // width: 70%;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /* background-color: #fff; */
  color: #333;
  text-align: center;
  line-height: 200px;
  border-right: 1px rgba(0, 0, 0, 0.3) solid;
}

.el-main {
  /* background-color: #fff; */
  color: #fff;
  text-align: left;
  /* height: 80vh; */
  font-size: 18px;
  word-wrap: normal;
  word-break: normal;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.return_btn {
  position: Fixed;
  right: 20%;
  top: 50%;
}

.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tag {
  width: 90%;
  display: block;
  margin: 10px auto;
}
</style>